*
{
margin:0;
padding:0;
}

html
{
--res:calc(0.01*6vmin);
}
body
{
background-color:aqua;
background-image:url(blason.png);
background-position:center;
background-position: top;
background-repeat: no-repeat;
margin-top:20px;
}
h1
{
text-align: center;
color: deepskyblue;
text-shadow:4px 4px 4px blue;
background-color: rgba(245, 245, 220, 0.69);
max-width:250px;
display: flex;
justify-content:center;
margin:auto;
position: relative;
animation-name: example;
animation-duration:4s;
border-radius:20%;
animation-iteration-count:3;

}

@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:goldenrod; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}


h5.intro
{
  font-size:1.5rem;
  padding:40px;
  text-align:center;
  text-overflow:hidden;
  border:15px ridge black;
   max-width:700px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  text-align: left;
  font-style: oblique;
  background-color: rgba(250, 235, 215, 0.575);
  margin-top:15px;
  font-size:clamp(1rem,2.5vw,18rem);
}
.photog
{
  display: flex;
  justify-content:center;
  place-items:center;
  margin-top:-230px;
  margin-left:auto;
  margin-right:auto;
  animation-name:photog;
  animation-duration:40s;
  }
  @keyframes photog {
    from{opacity:1}
    to{opacity:0}
 }
.mon-texte
{
  text-align: center;
  font-size:1.5rem;
  color:brown ;
  text-shadow:2px 2px 1px black;
}

h4.liste2
{
color:red;
text-align:center;
font-size:clamp(1rem,2.5vw,18rem);
}
h2.liste
{
color:brown;
text-align:center;
border-radius:10px;
font-size:clamp(1rem,2.5vw,18rem);
}
h4.liste2,h2.liste
{
  background-color: rgba(240, 255, 255, 0.514);
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  border-radius:10px;
  font-size:clamp(1rem,2.5vw,18rem);
}
h2.liste
{
color: crimson;
margin-top:00px;
}

h2,h3,h5
{
margin-left:15px;

}
h3
{
  color:crimson;
}

#myImage
{
display:flex;
margin: auto;
justify-content: center;
align-items: center;
margin:center;
margin-left:-90px;
padding:90px;

}
.image-container {
  position: relative;
  width:auto; /* Ajustez la taille selon vos besoins */
  height:auto;
  overflow: hidden; /* Pour masquer le débordement de l'image */
}

#myImage {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Pour que l'image remplisse le conteneur */
  transition: transform 0.3s ease; /* Effet de transition */
  
}

.magnifier {
  position: absolute;
  border: 2px solid black;
  width: 300px; /* Taille de la loupe */
  height: 300px;
  border-radius:50%;
  background-repeat: no-repeat;
  pointer-events: none; /* Pour ne pas intercepter les clics */
  display: none; /* Masquée par défaut */
}
.titre
{
  margin-top:50px;
text-align:center;
font-size:2rem;
font-family: "Yuji Mai", serif;
  font-weight: 700;
  font-style:italic;
  margin-left:auto;
  margin-right:auto;
  color:black;
  width:300px;
  background-color:aqua;
  width: 350px;
  height: 150px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px lightblue;
  margin-bottom:30px;
 
}
#titre
{
text-align:center;
font-size:1.5rem;
border:5px solid blue;
width:400px;
min-height:auto;
margin-left:auto;
margin-right:auto;
border-radius:20px;
background-color: rgba(250, 235, 215, 0.601);
}
.zoomable-container__img
{
display: block;
margin: auto;
cursor:crosshair;

}
#p1
{ 
  text-align:center;
  font-size:2rem;
  color: brown;
  padding:50px;
}
.parent {
  text-align: center; /* Centre le span à l'intérieur du div */
  padding:40px;
}

.parent span {
  display: inline-block; /* Nécessaire pour appliquer `font-size` et `transform` */
  font-size: 100px;
  transform: scale(1.2);
  color: blue;
}
.material-symbols-outlined
{
width:100px;
height:100px;
border-radius:100px;
background-color: antiquewhite;
}
.ecrit
{
  color: blue;
  text-align: center;
}

    @media screen and (max-width:700px)
     {
      body {
        font-size: 14px;
      }
      .navigation {
        display: none; /* Hide a desktop navigation menu */
      }
      .zoomable-container__img
      {
      max-width:300px;
       max-height:auto;
      }
       }